<template>
	<view class="order-list">
		<view class="order-list__header">
			<u-tabs :list="orderTabs" :current="currentTab" @click="tabClick" keyName="label"></u-tabs>
		</view>
		<view class="order-list__content">
			<view class="order-list__item flex-primary" v-for="(item,index) in orderList" :key="index">
				<view class="order-list__item-image flex-primary">
					<u--image :showLoading="true" :src="item.src" width="80px" height="80px" @click="click"></u--image>
				</view>
				<view class="" style="width: 300rpx;">
					<u--text bold :text="item.name" :lines="2"></u--text>
					<u--text margin="20rpx 0 0 0" size="12" type="info"
						:text="`有效期${item.date1}至${item.date2}`"></u--text>
				</view>
				<view class="">
					<u-button text="去使用" type="primary" size="mini"></u-button>
					<u--text margin="40rpx 0 0 0" size="12" type="info" text="使用规则>"></u--text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				orderTabs: [{
						label: '待付款',
						status: 1
					},
					{
						label: '待发货',
						status: 2
					},
					{
						label: '待收货',
						status: 3
					},
					{
						label: '待提货',
						status: 4
					},
					{
						label: '退款售后',
						status: 5
					},
				],
				orderList: [{
						src: '',
						name: '测试团购券测试团购券测试团购券测试团购券测试团购券',
						date1: '2023-12-23',
						date2: '2024-12-23',
					},
					{
						src: '',
						name: '测试团购券测试团购券测试团购券测试团购券测试团购券',
						date1: '2023-12-23',
						date2: '2024-12-23',
					}
				]
			}
		},
		onShow() {
			this.setStatus()
		},
		methods: {
			setStatus() {
				const status = getApp().globalData.orderStatus;
				this.orderTabs.find((item, index) => {
					if (item.status == Number(status)) {
						this.currentTab = index
						return true
					}
				})
			},
			tabClick() {}
		}
	}
</script>

<style lang="scss">
	.order-list__header {
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.order-list__item {
		background-color: #fff;
		height: 200rpx;
		border-radius: 18rpx;
		margin-bottom: 30rpx;
		display: flex;
		padding: 10rpx 40rpx;

		&-image {
			width: 160rpx;
			height: 160rpx;
			justify-content: center;
		}
	}
</style>